import { Image, Button, Popconfirm } from "antd";
import { FieldTimeOutlined, DeleteOutlined } from "@ant-design/icons";
import CommonPage from "@/components/page/CommonPage";
import CrudTable from "@/components/table/CrudTable";
import { useEffect, useRef } from "react";
import styled from "styled-components";
import { convertImgUrl } from "@/utils/MyFun";
import { formatDate } from "@/utils/common/common";
import { getOnlineUsers } from "@/api/user";

const Styled = styled.div``;

const Online = () => {
  const $table = useRef();
  const columns = [
    {
      title: "头像",
      key: "avatar",
      dataIndex: "avatar",
      width: 50,
      align: "center",
      render: (text, record, index) => {
        return (
          <Image
            style={{ height: "50px", borderRadius: "3px" }}
            src={convertImgUrl(record.avatar)}
            fallback="http://dummyimage.com/400x400"
          />
        );
      },
    },
    {
      title: "昵称",
      key: "nickname",
      width: 60,
      align: "center",
      ellipsis: true,
    },
    {
      title: "登录 IP",
      key: "ip_address",
      width: 70,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return <span>{record.ip_address || "未知"}</span>;
      },
    },
    {
      title: "IP 来源",
      key: "ip_source",
      dataIndex: "ip_source",
      width: 70,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return <span>{record.ip_source || "未知"}</span>;
      },
    },
    {
      title: "登录浏览器",
      key: "browser",
      width: 70,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return <span>{record.browser || "未知"}</span>;
      },
    },
    {
      title: "操作系统",
      key: "os",
      width: 70,
      align: "center",
      ellipsis: true,
      render(text, record, index) {
        return <span>{record.os || "未知"}</span>;
      },
    },
    {
      title: "登录时间",
      key: "last_login_time",
      align: "center",
      width: 70,
      render(text, record, index) {
        return (
          <Button
            type="link"
            icon={<FieldTimeOutlined />}
            size="small"
            style={{ color: "#333" }}
          >
            {formatDate(record.last_login_time)}
          </Button>
        );
      },
    },
    {
      title: "操作",
      key: "actions",
      width: 60,
      align: "center",
      fixed: "right",
      render(text, record, index) {
        return (
          <Popconfirm
            title="确定强制该用户下线吗？"
            onConfirm={() => {}}
            okText="确认"
            cancelText="取消"
          >
            <Button
              type="primary"
              icon={<DeleteOutlined />}
              style={{ backgroundColor: "#D03050FF" }}
            >
              下线
            </Button>
          </Popconfirm>
        );
      },
    },
  ];

  useEffect(() => {
    getOnlineUsers().then((res) => console.log(res));
  }, []);

  return (
    <Styled>
      <CommonPage title="在线用户">
        <CrudTable
          ref={$table}
          columns={columns}
          hasRowSelection={false}
        ></CrudTable>
      </CommonPage>
    </Styled>
  );
};

export default Online;
